<script setup>
import router from "@/router/index.js";
import {login} from "@/net/index.js"
import {reactive, ref} from "vue";

const formRef = ref()
const form = reactive({
  username: '',
  password: '',
  remember: false
})
function userLogin() {
  formRef.value.validate((isValid) => {
    if(isValid) {
      login(form.username, form.password, form.remember, () => router.push("/index"))
    }
  });
}
const rules = {
  username: [
    { required: true, message: '请输入用户名' }
  ],
  password: [
    { required: true, message: '请输入密码'}
  ]
}
</script>

<template>
  <div class="all" >
    <div class="log">
      <div class="login">
        <el-form :model="form" :rules="rules" ref="formRef">
          <div class="login-top-grid">
            <h3>用户登录</h3>
            <div class="input">
              <span>用户名 <label style="color: red">* </label></span>
              <el-input
                  style="height: 40px"
                  v-model="form.username"
                  placeholder="用户名/邮箱"/>
            </div>
            <div class="input">
              <span>密码 <label style="color: red">*</label></span>
              <el-input
                  style="height: 40px"
                  v-model="form.password"
                  type="password"
                  placeholder="请输入密码"/>
            </div>
            <div>
              <el-checkbox style="text-align: left;margin: 10px 50px;" v-model="form.remember">记住我</el-checkbox>
              <el-link @click="router.push('/forget')" style="text-align: right ; margin: 0 0 10px 100px ;color: #999999">忘记密码？</el-link>
            </div>
          </div>
          <div class="text-center">
            <el-button @click="userLogin" style="width: 100px;height: 40px;" type="primary">登录</el-button>
          </div>
        </el-form>
      </div>
    </div>
    <div class="reg">
      <div class="reg_1">
        <h2>没有账号？</h2>
        <p>立即注册加入我们吧，和我们一起开启旅程吧</p>
        <el-link style="color: #999999" @click="router.push('/register')">
          <button  class="register" @click="router.push('/register')">注册</button>
        </el-link>
      </div>
    </div>
  </div>
</template>

<style scoped>

html, body {
  height: 100%;
  margin: auto;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.all {
  width: 800px;
  box-shadow: -10px 10px 25px rgba(210, 210, 210, 0.9);
  display: flex;
  border-radius: 35px;
  background-color: #ffffff;
  height: 550px;
  margin: auto;
}

.log {
  width: 50%;
  margin: auto;
}

.reg {
  width: 50%;
  height: 100%;
  margin: auto;
  background-color: #20b2aa;
  border-radius: 35px;
  color: #ffffff;
}

.reg_1 {
  text-align: center;
  margin: 50% auto auto;
}

.reg_1 h2 {
  font-weight: 700;
}

.reg_1 p {
  margin: 15px 0 25px 0;
}

.register {
  width: 70px;
  height: 30px;
  border-radius: 12px;
  background-color: #20b2aa;
  border-color: #fff;
  color: #ffffff;
}

.reg_1 a {
  color: #ffffff;
}

h3 {
  font-size: 3em;
  color: black;
  padding-bottom: 1em;
  margin: 0;
  text-align: center;
  font-family: "Marvel-Regular", serif;
}

.input {
  margin: 10px 50px;
  width: 300px;
  height: 70px;
}

span {
  color: #999;
  font-size: 0.85em;
  padding-bottom: 0.2em;
  display: block;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.login-top-grid {
  color: black;
  padding-bottom: 1em;
  font-family: "Marvel-Regular", serif;
  margin: 10px 0;
}

.text-center {
  text-align: center;
}
</style>